/*
 * Copyright (C) 2022 KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import org.ukui.tablet 1.0

ApplicationWindow {
    width: 1000
    height: 480
    visible: true
    title: qsTr("Qml Demos")

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Rectangle {
            ListView {
                id: listView
                x: 110
                width: parent.width - 100
                height: parent.height
                orientation: ListView.Horizontal
                model: modelManager.launcherModel
                delegate: KGridView {
                    id: gridView
                    width: 500
                    height: 1000
                    cellWidth: 80
                    cellHeight: 80
                    model: modelData
                    add: Transition {
                        id: addTransition
                        property int mouseY: 100
                        NumberAnimation { properties: "x,y"; duration: 200 }
//                        PropertyAnimation { property: "y"; from: parent.mouseY; duration: 200 }
                    }
                    addDisplaced: Transition {
                        NumberAnimation { properties: "x,y"; duration: 200 }
                    }
                    move: Transition {
                        NumberAnimation { properties: "x,y"; duration: 200 }
                    }
                    moveDisplaced: Transition {
                        NumberAnimation { properties: "x,y"; duration: 200 }
                    }
                    remove: Transition {
                        NumberAnimation { properties: "x,y"; duration: 200 }
                    }
                    removeDisplaced: Transition {
                        NumberAnimation { properties: "x,y"; duration: 200 }
                    }
                    displaced: Transition {
                        NumberAnimation { properties: "x,y"; duration: 200 }
                    }
                    delegate: itemDelegate
                }
            }
            Button {
                width: 100
                text: "move item"
                onClicked: {
                    modelManager.removeItem(0, 1)
                }
            }
        }
    }

    Component {
        id: itemDelegate

        DropArea {
            id: delegate
            width: 80
            height: 80

            opacity: 1

            signal launch(int x, int y, var source, string title)

            property int visualIndex: index
            property int visualAppInPageIndex: model.modelData.pageIndex

            property var modelData: typeof model !== "undefined" ? model : null

            property int pageIndex: model.modelData.pageIndex

            Binding { target: iconRootHandle; property: "visualIndex"; value: visualIndex }
            Binding { target: iconRootHandle; property: "visualAppInPageIndex"; value: visualAppInPageIndex }

            Component.onCompleted: {
                model.modelData.itemIndex = index
                iconRootHandle.visualIndex = index
            }

            onContainsDragChanged: {
            }

            onVisualIndexChanged: {
            }

            Behavior on x {
                NumberAnimation { duration: 1000 }
            }
            Behavior on y {
                NumberAnimation { duration: 1000 }
            }

            onEntered: {
                console.log("drop area on entered.", this,
                            drag.source.pageIndex, pageIndex,
                            visualIndex, pageIndex)
                if (drag.source.pageIndex !== pageIndex) {
                    modelManager.addPlaceholderItem(visualIndex, pageIndex)
                } else {
                    modelManager.removePlaceholderItem();
                }
            }
            onDropped: {
                console.log("on dropped.")
            }

            Item {
                id: iconRootHandle
                property int pageIndex: model.modelData.pageIndex
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top

                width: 80
                height: 80

                property int visualIndex: index
                property int visualAppInPageIndex: model.modelData.pageIndex

                clip: false

                Drag.active: mouseAreaHandle.drag.active
                Drag.source: iconRootHandle
                Drag.hotSpot.x: iconRootHandle.width / 2
                Drag.hotSpot.y: iconRootHandle.height / 2

                Drag.onActiveChanged: {

                }

                states: [
                    State {
                        when: iconRootHandle.Drag.active
                        ParentChange {
                            target: iconRootHandle
                            parent: listView
                        }

                        AnchorChanges {
                            target: iconRootHandle
                            anchors.horizontalCenter: undefined
                            anchors.top: undefined
                        }
                    }
                ]

                MouseArea {
                    id: mouseAreaHandle
                    property int pageIndex: model.modelData.pageIndex
                    property int visualIndex: visualIndex
                    anchors.fill: parent
                    hoverEnabled: true
                    // drag.target: iconRootHandle

                    onPositionChanged:  {
//                        console.log(iconRootHandle.mapToItem(gridView, 0, 0))
                    }

                    onPressed: {
                    }

                    onReleased: {
                        console.log("release.", delegate.drag.source.visualIndex, pageIndex)

//                        modelManager.replacePlaceholderItem(3, 1)
                        if (delegate.drag.source.pageIndex !== pageIndex) {
                            modelManager.addPlaceholderItem(visualIndex, pageIndex)
                        } else {
                            modelManager.removePlaceholderItem();
                        }
                    }

                    onCanceled: {

                    }

                    onClicked: {

                    }

                    onEntered: {
                    }

                    onExited: {

                    }

                    onPressAndHold:  {
                        console.log("pressAndHold")
                        mouseAreaHandle.Drag.active = true
                        mouseAreaHandle.drag.target = iconRootHandle
                    }
                }
                Rectangle {
                    property int visualIndex: 0
                    property int pageIndex: 0

                    id: item
                    width: 72

                    height: 72
                    color: model.modelData.name
                    anchors {
                        horizontalCenter: parent.horizontalCenter;
                        verticalCenter: parent.verticalCenter
                    }
                }
            }
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex

        TabButton {
            text: qsTr("Move Item")
        }
        TabButton {
            text: qsTr("Page 2")
        }
    }
    Component.onCompleted: {
        qmlLogger.debug("this is qml log.")
    }

    Component {
        id: itemDelegate1
        DropArea {
            width: 80
            height: 80
            onEntered: {
                console.log(drag.source.visualIndex, drag.source.pageIndex,
                            visualIndex, pageIndex, drag.y, addTransition.mouseY)
                if (drag.source.pageIndex !== pageIndex) {
                    addTransition.mouseY= drag.y
                    modelManager.addPlaceholderItem(visualIndex, pageIndex)
                } else {
                    modelManager.removePlaceholderItem();
                }
            }
            onDropped: {
                console.log("dropped")
                if (drag.source.pageIndex === pageIndex) {
                    modelManager.removePlaceholderItem();
                }
            }
            property int visualIndex: model.index
            property int pageIndex: modelData.pageIndex
            Binding { target: item; property: "visualIndex"; value: visualIndex }
            Binding { target: item; property: "pageIndex"; value: pageIndex }

            Item {
                anchors.fill: parent
                DragHandler {
                    id: dragHandler
                }

                Drag.active: dragHandler.active
                Drag.source: item
                Drag.hotSpot.x: 36
                Drag.hotSpot.y: 36

                states: [
                    State {
                        when: item.Drag.active
                        ParentChange {
                            target: item
                            parent: listView
                        }

                        AnchorChanges {
                            target: item
                            anchors.horizontalCenter: undefined
                            anchors.verticalCenter: undefined
                        }
                    }
                ]
//                MouseArea {
//                    anchors.fill: parent
//                }
                Rectangle {
                    property int visualIndex: 0
                    property int pageIndex: 0

                    id: item
                    width: 72
                    height: 72
                    color: modelData.name
                    anchors {
                        horizontalCenter: parent.horizontalCenter;
                        verticalCenter: parent.verticalCenter
                    }
                }
            }
        }
    }


}
